<template>
  <div class="page-card verify-data" v-if="load">
    <h-query :showKey="[]" :query="query" @search="search">
      <!-- <a-button type="primary" class="a-button-right" style="margin: 6px 0 0 0;margin-top: 50px" @click="showJj = true;nowDate = moment().format('YYYY-MM-DD HH:mm:ss')">交接班注意事项</a-button> -->
      <a-button class="verify-btn a-button-right" style="margin: 6px 0 0 0;" type="primary" @click="toHistory">历史记录</a-button>
    </h-query>
    <h-ccard shadow>
      <a-row :gutter="20">
        <a-col :span="4">
          <div class="verify-list">
            <h1 class="verify-label">事件名称: </h1>
            <div class="verify-list--scroll">
              <div @click="select(item, i)" :class="['verify-each', active.includes(item.id) ? 'active' : '']" v-for="(item, i) in history" :key="i">
                <div class="verify-order" v-if="active.includes(item.id)">{{ active.findIndex(e => e == item.id) + 1 }}</div>
                <p>{{ item.eventCode }}</p>
                <p class="ellipsis">{{ item.title }}</p>
              </div>
            </div>
          </div>
          <!-- <div class="verify-list">
            <h1 class="verify-label">下属部门上报: </h1>
            <div class="verify-list--scroll">
              <div :class="['verify-each']" v-for="(item, i) in historyDetp" :key="i">
                <p>{{ item.title }}</p>
              </div>
            </div>
          </div> -->
        </a-col>
        <a-col :span="20">
          <div style="position: relative">
            <h1 class="verify-label">{{ $route.meta.title }}</h1>
          </div>
          <a-collapse v-model="activeKey">
            <a-collapse-panel key="1" header="今日已保存记录">
              <h-table
                ref="htableHis"
                @init="getHistory"
                :config="configHis">
                <span slot="order" slot-scope="{index}">
                  {{ index + 1 }}
                </span>
              </h-table>
            </a-collapse-panel>
          </a-collapse>

          <h-table
            ref="htable"
            @init="getList"
            :config="config">
            <span slot="order" slot-scope="{index}">
              {{ index + 1 }}
            </span>
            <!-- <span slot="link" slot-scope="{text, record}">
              <div>{{ record.title }}</div>
              <a :href="record.link" target="_blank">{{ record.link }}</a>
            </span> -->
            <!-- <template > -->
            <template v-for="item in config.columns.filter(e => e.dataIndex != 'action' && e.dataIndex != 'order')" :slot="item.dataIndex" slot-scope="{record}">
              <a-select
                style="width: 100%"
                placeholder="请选择"
                v-if="item.title == '单位评分'"
                :key="item.dataIndex + 1"
                v-model="record[item.dataIndex]"
                @change="change($event, record, item.dataIndex)">
                <a-select-option value="1">1</a-select-option>
                <a-select-option value="2">2</a-select-option>
                <a-select-option value="3">3</a-select-option>
                <a-select-option value="4">4</a-select-option>
                <a-select-option value="5">5</a-select-option>
                <a-select-option value="6">6</a-select-option>
                <a-select-option value="7">7</a-select-option>
                <a-select-option value="8">8</a-select-option>
                <a-select-option value="9">9</a-select-option>
                <a-select-option value="10">10</a-select-option>
              </a-select>
              <a-select
                style="width: 100%"
                v-else-if="item.title == '报送单位'"
                :key="item.dataIndex + 'd' + 1"
                v-model="record[item.dataIndex]"
                @change="change($event, record, item.dataIndex)"
                placeholder="请选择">
                <a-select-option value="宁波市网信办">宁波市网信办</a-select-option>
                <a-select-option :value="item.depart" v-for="(el) in deptArr" :key="el.id">{{ el.depart }}</a-select-option>
              </a-select>
              <a-select
                v-else-if="item.title == '属地'"
                :key="item.dataIndex + 's' + 1"
                style="width: 100%"
                v-model="record[item.dataIndex]"
                @change="change($event, record, item.dataIndex)"
                placeholder="请选择">
                <a-select-option v-for="el in address" :value="el.title" :key="el.title">{{ el.title }}</a-select-option>
              </a-select>
              <a-textarea v-else :rows="3" :key="item.dataIndex" v-model="record[item.dataIndex]" @blur="blur($event, record, item.dataIndex)"></a-textarea>
            </template>
            <!-- </template> -->

            <!-- <span slot="onlineResponse">
              <a-input v-for="item in config.columns" :key="item.dataIndex" placeholder="请输入"></a-input>
            </span> -->

            <span slot="action" slot-scope="{text, record}">
              <a class="red" @click="remove(record)">删 除</a>
            </span>
          </h-table>
          <div class="verify-footer">
            <a-button type="primary" @click="save">保 存</a-button>
            <a-button type="primary" style="margin-left: 12px" @click="showNowData = true">导出</a-button>
          </div>
        </a-col>
      </a-row>
    </h-ccard>

    <a-modal v-model="showJj" :title="`交接班注意事项（${nowDate}）`" hideCan :closable="false" :maskClosable="false">
      <a-textarea v-model="note" :rows="5"></a-textarea>

      <template slot="footer">
        <a-button type="primary" @click="showJj=false">确定</a-button>
      </template>
    </a-modal>

    <nowDataModal v-model="showNowData" :id="id" @submit="exportSave" />
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { everDetail, getAllEvent, getBeOnDutyEvent, addBeOnDuty, getHistory, address } from '@/api/serve';
import { ExportTemplate } from '@/api/dutyTime';
import { getDepartByIsOut } from '@/api/dept';
import moment from 'moment';
import nowDataModal from './action/nowDataModal';
import { columns as columnsHis } from './action/columns';
const columns = {
  // 每日值班舆情及处置情况一览表
  '5838747468921223136': [
      {
        align: 'center',
        title: '序号',
        dataIndex: 'order',
        scopedSlots: { customRender: 'order' }
      },
      {
        align: 'center',
        title: '日期',
        dataIndex: 'createTime',
        width: 100
      },
      {
        align: 'center',
        title: '舆情文字+链接',
        dataIndex: 'textLink',
        width: 300,
        scopedSlots: { customRender: 'textLink' }
      },
      {
        align: 'center',
        title: '来源',
        dataIndex: 'address',
        scopedSlots: { customRender: 'address' },
        width: 200
      },
      {
        align: 'center',
        title: '类别',
        dataIndex: 'category',
        scopedSlots: { customRender: 'category' },
        width: 200
      },
      {
        align: 'center',
        title: '属地',
        dataIndex: 'territory',
        scopedSlots: { customRender: 'territory' },
        width: 200
      },
      {
        align: 'center',
        title: '部门',
        dataIndex: 'depart',
        scopedSlots: { customRender: 'depart' },
        width: 200
      },
      {
        align: 'center',
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' }
      }
    ],
    // 网上舆情信息表
  '5831651651651248516': [
      {
        align: 'center',
        title: '序号',
        dataIndex: 'order',
        scopedSlots: { customRender: 'order' }
      },
      {
        align: 'center',
        title: '单位',
        dataIndex: 'depart',
        width: 120,
        scopedSlots: { customRender: 'depart' }
      },
      {
        align: 'center',
        title: '网上反应内容',
        dataIndex: 'onlineResponse',
        scopedSlots: { customRender: 'onlineResponse' },
        width: 200
      },
      {
        align: 'center',
        title: '信息来源',
        dataIndex: 'source',
        scopedSlots: { customRender: 'source' },
        width: 200
      },
      {
        align: 'center',
        title: '办理情况',
        dataIndex: 'dealWithSituation',
        scopedSlots: { customRender: 'dealWithSituation' },
        width: 200
      },
      {
        align: 'center',
        title: '反馈结果',
        dataIndex: 'feedbackResults',
        scopedSlots: { customRender: 'feedbackResults' },
        width: 200
      },
      {
        align: 'center',
        title: '单位评分',
        dataIndex: 'score',
        scopedSlots: { customRender: 'score' },
        width: 200
      },
      {
        align: 'center',
        title: '时间',
        dataIndex: 'date',
        width: 200
      },
      {
        align: 'center',
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' }
      }
    ],
  // 浙江省每周地市网络舆情分险点报送表
  '5838744128921248516': [
      {
        align: 'center',
        title: '序号',
        dataIndex: 'order',
        scopedSlots: { customRender: 'order' }
      },
      {
        align: 'center',
        title: '风险点',
        dataIndex: 'riskPoint',
        scopedSlots: { customRender: 'riskPoint' },
        width: 200
      },
      {
        align: 'center',
        title: '事项',
        dataIndex: 'matters',
        scopedSlots: { customRender: 'matters' },
        width: 200
      },
      {
        align: 'center',
        title: '分析研判',
        dataIndex: 'analysisJudge',
        scopedSlots: { customRender: 'analysisJudge' },
        width: 200
      },
      {
        align: 'center',
        title: '报送人',
        dataIndex: 'createBy',
        scopedSlots: { customRender: 'createBy' },
        width: 200
      },
      {
        align: 'center',
        title: '报送单位',
        dataIndex: 'depart',
        scopedSlots: { customRender: 'depart' },
        width: 200
      },
      {
        align: 'center',
        title: '报送时间',
        dataIndex: 'recordDate',
        width: 200
        // scopedSlots: { customRender: 'recordDate' }
      },
      {
        align: 'center',
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' }
      }
    ],
    // 网民热点关注表
  '5838747468912348516': [
      {
        align: 'center',
        title: '序号',
        dataIndex: 'order',
        scopedSlots: { customRender: 'order' }
      },
      {
        align: 'center',
        title: '热点问题',
        dataIndex: 'hotInformation',
        scopedSlots: { customRender: 'hotInformation' },
        width: 200
      },
      {
        align: 'center',
        title: '舆情风险',
        dataIndex: 'publicOpinionRisk',
        scopedSlots: { customRender: 'publicOpinionRisk' },
        width: 200
      },
      {
        align: 'center',
        title: '工作建议',
        dataIndex: 'workProposal',
        scopedSlots: { customRender: 'workProposal' },
        width: 200
      },
      // {
      //   align: 'center',
      //   title: '单位',
      //   dataIndex: 'depart',
      //   scopedSlots: { customRender: 'depart' },
      //   width: 200
      // },
      {
        align: 'center',
        title: '时间',
        dataIndex: 'date',
        width: 200
        // scopedSlots: { customRender: 'date' }
      },
      {
        align: 'center',
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' }
      }
    ]
};

export default {
  inject: ['toURL', 'setTitle'],
  components: {
    nowDataModal
  },
  data() {
    return {
      moment,
      load: true,
      activeKey: '1',
      nowDate: moment().format('YYYY-MM-DD'),
      dataShow: false,
      showJj: false,
      showNowData: false,
      dataForm: {
        front: '80',
        back: '10'
      },
      active: [],
      note: '',
      selectData: {},
      query: [
        {
          key: 'title',
          type: 'input',
          label: '搜索事件'
        },
        {
          key: ['startTime', 'endTime'],
          type: 'dateTime',
          label: '时间'
        }

      ],
      history: [
        // {
        //   title: 'XXX事件名称',
        //   time: '2022-02-02 20:00',
        //   statusText: '已完成'
        // }
      ],
      historyDetp: [

      ],
      config: {
        rowKey: 'id',
        // bordered: true,
        dataSource: [],
        columns: [],
        pagination: false
        // scroll: {
        //   x: 800
        // }
      },
      configHis: {
        rowKey: 'id',
        size: 'small',
        // bordered: true,
        dataSource: [],
        columns: [],
        pagination: false,
        scroll: {
          y: 400
        }
      },
      id: '',
      time: '',
      api: {
        '5831651651651248516': '/web/reportDuty/query_publicOpinionInformation',
        '5838744128921248516': '/web/reportDuty/query_opinionEveryWeek',
        '5838747468912348516': '/web/reportDuty/query_topicsOfInternetUsers',
        '5838747468921223136': '/web/reportDuty/query_dailyDutyRecord'
      },
      historys: [],
      historyIds: [],
      deptArr: [],
      address: []
    };
  },
  created() {
    this.setTitle();
    this.$route.meta.title = this.$route.query.title;
    this.id = this.$route.query.id;
    this.$set(this.config, 'columns', columns[this.id]);
    this.$nextTick(() => {
      this.$set(this.configHis, 'columns', columnsHis[this.id]);
    });

    this.getAllEvent();
    this.getHistory();
    this.getDepartByIsOut();
    this.getAddress();
    // this.getList();
  },
  methods: {
    getDepartByIsOut() {
      getDepartByIsOut({
        isOut: 0
        // eventId: this.id,
        // ...this.params
      }).then(res => {
        // this.config.dataSource = res.data;
        this.deptArr = res.data;
      });
    },

    search(params) {
      console.log(params);
      this.time = params.time;
      this.getAllEvent(params);
    },
    select(item, i) {
      if (this.historyIds.includes(item.id)) return;
      const id = this.active.findIndex(e => e == item.id);
      if (id > -1) {
        this.active.splice(id, 1);
      } else {
        this.active.push(item.id);
      }

      console.log(this.active);

      if (this.active.filter(e => !this.historyIds.includes(e)).length) {
        this.getBeOnDutyEvent();
      } else {
        this.config.dataSource = [];
      }

      this.selectData = item;
    },
    getList() {
      everDetail(this.api[this.id], {
        time: this.time
      }).then(res => {
        this.config.dataSource = res.data || [];
      });
    },
    remove(record) {
      this.$message.success('删除成功');
      const id = this.active.findIndex(e => e == record.id);
      if (id > -1) {
        this.active.splice(id, 1);
      }
      if (this.active.length) {
        this.getBeOnDutyEvent();
      } else {
        this.config.dataSource = [];
      }
      // this.$refs.htable.refresh(true);
    },
    getAllEvent(params) {
      let obj = {
        dutyId: this.id
      };
      if (params) {
        const { startTime: start, endTime: end, title } = params;
        obj = {
          ...params,
          dutyId: this.id,
          start,
          end,
          title
        };
      }
      getAllEvent(obj).then(res => {
        this.history = res.data.map(e => {
          return {
            ...e,
            title: e.title || 'title为null'
          };
        });
      });
    },
    getBeOnDutyEvent() {
      getBeOnDutyEvent({
        uid: this.active.filter(e => !this.historyIds.includes(e)),
        dutyId: this.id
      }).then(res => {
        const data = res.data ? res.data.map((e, i) => {
          return {
            ...e,
            sortNo: i + 1,
            textLink: this.id == '5838747468921223136' ? e.title + ' ' + e.link : '',
            date: moment().format('YYYY-MM-DD HH:mm:ss'),
            recordDate: moment().format('YYYY-MM-DD HH:mm:ss'),
            score: '',
            depart: this.id == '5838744128921248516' ? '宁波市网信办' : undefined
            // source: (e.eventCode || '') + '-' + e.title
          };
        }) : [];
        const ids = this.config.dataSource.map(e => e.id);
        this.config.dataSource = this.config.dataSource.concat(data.filter(e => !ids.includes(e.id))).filter(e => {
          return this.active.includes(e.id);
        });
      });
    },
    blur(e, { id }, key) {
      console.log(e.target.value, key);
      const data = this.config.dataSource.find(e => e.id == id);
      if (data) {
        data[key] = e.target.value;
      }
      console.log(this.config.dataSource);
    },
    change(e, { id }, key) {
      const data = this.config.dataSource.find(e => e.id == id);
      if (data) {
        data[key] = e;
      }
      console.log(this.config.dataSource);
    },
    save() {
      if (!this.config.dataSource.length) {
        this.$message.error('请先选择事件');
        return;
      }
      const that = this;
      const data = that.config.dataSource.map(e => {
        return {
          ...e,
          eventId: e.id,
          note: this.note,
          dutyId: this.id
        };
      });
      this.$confirm({
        title: '温馨提示',
        content: '确定要保存吗？',
        onOk() {
          addBeOnDuty({
            entity: data
          }).then(res => {
            that.load = false;
            that.$nextTick(() => {
              that.load = true;
            });
            // that.active = [];
            // that.config.dataSource = [];
            that.$message.success(res.msg);
          });
        }
      });
    },
    exportSave(ids) {
      if (!ids.length) {
        this.$message.error('没有数据！');
        return;
      }
      const that = this;
      this.$confirm({
        title: '温馨提示',
        content: '确定要保存并导出吗？',
        onOk() {
          ExportTemplate({
            dutyId: that.id,
            reportId: ids.join(',')
          }).then(res => {
            that.active = [];
            that.config.dataSource = [];
            // that.$message.success(res.msg);
            const blob = new Blob([res], { type: 'application/vnd.ms-excel' });

            const filename = `${that.$route.meta.title}-${moment().format('YYYYMMDDHHmmss')}.xls`;

            if (window.navigator.msSaveOrOpenBlob) { // 兼容IE10
                  navigator.msSaveBlob(blob, filename);
            } else {
              // 创建一个超链接，将文件流赋进去，然后实现这个超链接的单击事件
              const elink = document.createElement('a');
              elink.download = filename;
              elink.style.display = 'none';
              elink.href = URL.createObjectURL(blob);
              document.body.appendChild(elink);
              elink.click();
              URL.revokeObjectURL(elink.href); // 释放URL 对象
              document.body.removeChild(elink);
            }
          });
        }
      });
    },
    toHistory() {
      this.$router.push({ path: '/semList/index1', query: this.$route.query });
    },
    getHistory() {
      getHistory({
        dutyId: this.id,
        start: moment().format('YYYY-MM-DD'),
        end: moment().format('YYYY-MM-DD')
      }).then(res => {
        this.configHis.dataSource = res.data.records;
        this.configHis.total = res.data.total;
        this.active = res.data.records.map(e => e.eventId);
        this.historyIds = res.data.records.map(e => e.eventId);
      });
    },
    getAddress() {
      address().then(res => {
        this.address = res.data;
      });
    }

  }
};
</script>

<style scoped lang="less">
  .UserLayout .content {
    padding: 0;
  }
  .verify-data {
    padding: 50px 30px;
    .verify--btn {
      position: absolute;
      right: 0;
      top: 0;
    }
    .verify-list {
      margin-left: -34px;
      margin-bottom: 16px;
      border-bottom: 1px solid #ddd;
      padding-bottom: 12px;
      .verify-list--scroll {
        height: 480px;
        overflow-y: scroll;
        overflow-x: hidden;
        &::-webkit-scrollbar-thumb {
          border-radius: 10px;
          background: #1F3B8A;
        }
        &::-webkit-scrollbar-track {
          border-radius: 10px;
          background: #EDEDED;
        }
        &::-webkit-scrollbar {
          width: 6px;
          height: 1px;
        }
      }
      &:last-child {
        margin-bottom: 0;
        border: none;
      }

      .verify-label {
        padding-left: 42px;
      }
    }
    .verify-label {
      font-size: 17px;
      font-weight: 600;
      color: #333;
      // padding-left: 42px;
      margin-bottom: 16px;
    }
    .verify-btn {
      position: absolute;
      right: 0;
      top: 0;
    }
    .verify-each {
      padding: 12px 12px;
      padding-left: 22px;
      box-sizing: border-box;
      // border-radius: 4px;
      position: relative;
      width: 94%;
      margin-left: 6%;
      border-bottom: 1px solid #ddd;
      cursor: pointer;
      &:hover {
        background: rgba(31, 59, 138, 0.05);
      }
      &.active {
        background: rgba(31, 59, 138, 0.1);
        &::before {
          content: ' ';
          position: absolute;
          left: 0;
          // border-radius: 10px;
          background: #1F3B8A;
          width: 4px;
          height: 100%;
          top: 0;
        }
      }
      p {
        margin: 0;
      }
      >p:first-child {
        font-size: 14px;
        font-weight: 500;
        color: #333;
        margin-bottom: 2px;
      }
    }
  }
  .selectall {
    position: absolute;
    right: 12px;
    top: 0;
    z-index: 222;
  }
  .verify-footer {
    text-align: right;
    margin-top: 20px;
  }
  .verify-order {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: #1F3B8A;
    line-height: 30px;
    color: #fff;
    text-align: center;
    left: -15px;
    top: 50%;
    margin-top: -15px;
  }
</style>
